<template>
    <div class="detail-wrap">
        <el-row>
            <el-col>
                <div class="title">
                    订单号：{{ detail.orderNo }}
                    <span class="copy" @click="copy">复制</span>
                </div>
            </el-col>
        </el-row>
        <div class="detail-content">
            <div class="detail-item">
                <div>
                    <div class="item">
                        <div>客户姓名：</div>
                        <div class="value">{{ detail.name }}</div>
                    </div>
                    <div class="item">
                        <div>手机号：</div>
                        <div class="value">{{  detail.phone }}</div>
                    </div>
                    <div class="item">
                        <div>业务经理：</div>
                        <div class="value">{{  detail.updateBy }}</div>
                    </div>
                    <div class="item">
                        <div>所在城市：</div>
                        <div class="value">{{  detail.provinceName }}-{{  detail.cityName }}</div>
                    </div>
                </div>
            </div>
            <el-tabs v-model="active" type="card">
                <el-tab-pane label="申请资料" name="normal">
                </el-tab-pane>
            </el-tabs>
            <el-row>
                <el-col :span="8">
                    客户来源：{{ detail.sourceType == '1' ? '平台' :'渠道' }}/{{ detail.channelName }}
                </el-col>
                <el-col :span="8">
                    <div class="item">
                        <div>申请金额：</div>
                        <div class="value" v-if="detail.demandCode == '0'">30000以下</div>
                        <div class="value" v-if="detail.demandCode == '1'">30000-100000</div>
                        <div class="value" v-if="detail.demandCode == '2'">100000-300000</div>
                        <div class="value" v-if="detail.demandCode == '3'">300000以上</div>
                    </div>
                </el-col>
               
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div class="item">
                        <div> 客户信息：</div>
                        <div class="value">{{ detail.name }}{{  detail.phone }}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item">
                        <div>所在城市：</div>
                        <div class="value">{{  detail.provinceName }}-{{  detail.cityName }}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                
                <el-col :span="8">
                    <div class="item">
                        <div>身份证：</div>
                        <div class="value">{{  detail.idCard }}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item">
                        <div>年龄：</div>
                        <div class="value">{{  detail.age }}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div class="item">
                        <div>申请时间：</div>
                        <div class="value">{{  detail.createTime}}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item">
                        <div>匹配时间：</div>
                        <div class="value">{{  detail.matchTime }}</div>
                    </div>
                </el-col>
                
            </el-row>
            <el-row >
                <el-col :span="8">
                    <div class="item">
                        <div>推送状态：</div>
                        <div class="value">{{ detail.matchStatus == 1 ? '推送入库失败' : '推送入库成功' }}</div>
                    </div>
                </el-col>
                <el-col :span="12" v-if="detail.matchStatus == 1">
                    失败原因： {{  detail.matchReason }}
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div class="item">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-document"
                            @click="lookAgreement"
                        >授权协议</el-button>
                       
                    </div>
                </el-col>
            </el-row>
            <el-tabs v-model="active" type="card">
                <el-tab-pane label="资质信息" name="normal">
                </el-tab-pane>
            </el-tabs>
            <el-row>
                <el-col> <span class="select-title">已选资质： {{ getTotalNum() }}</span></el-col>
            </el-row>
            <el-row class="title-content">
                <el-col>
                    <span  :class="[detail.isCar == '1' ? 'title-item' :'title-item gray-title']"  >{{ detail.isCar == '1' ? '有车' : '无车'}}</span>
                    <span  :class="[detail.isHouse == '1' ? 'title-item' :'title-item gray-title']" >{{ detail.isHouse == '1' ? '有房' : '无房'}}</span>
                    <span  :class="[detail.isFund == '1' ? 'title-item' :'title-item gray-title']" >{{ detail.isFund == '1' ? '有公积金' : '无公积金'}}</span>
                    <span  :class="[ detail.isLicense == '1' ? 'title-item' :'title-item gray-title']" >{{ detail.isLicense == '1' ? '有营业执照' : '无房=营业执照'}}</span>
                    <span  :class="[detail.isSocial == '1' ? 'title-item' :'title-item gray-title']" >{{ detail.isSocial == '1' ? '有社保' : '无社保'}}</span>
                    <span  :class="[detail.isClockSalary == '1' ? 'title-item' :'title-item gray-title']" >{{ detail.isClockSalary == '1' ? '有打卡工资' : '无打卡工资'}}</span>
                    <span  :class="[detail.isWarranty == '1' ? 'title-item' :'title-item gray-title']" >{{ detail.isWarranty == '1' ? '有保单' : '无保单'}}</span>
                    <span  :class="[detail.isLocal == '1' ? 'title-item' :'title-item gray-title']" >{{ detail.isLocal == '1' ? '有本地户籍' : '无本地户籍'}}</span>
                    <span  :class="[detail.sesameCode > 0 ? 'title-item' :'title-item gray-title']" >{{ detail.sesameCode > 0 ? '有芝麻分' : '无芝麻分'}}</span>
                </el-col>
            </el-row>
            <el-row v-if="detail.isCar == '1'">
                <el-col :span="8">
                    <div class="item">
                        <div >车类型：</div>
                        <div class="value" v-if="detail.isCar == '1'">
                            <span v-if="detail.carType == '1'">全款车</span>
                            <span v-if="detail.carType == '2'">按揭车</span>
                            <span class="mar-l-10">{{ detail.carNumber }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8"  v-if="detail.sesameCode > 0">
                    <!-- sesameCode -->
                    <div class="item">
                        芝麻分：
                        <div v-if="detail.sesameCode == '1'">550以下</div>
                        <div v-if="detail.sesameCode == '2'">550-600</div>
                        <div v-if="detail.sesameCode == '3'">600-650</div>
                        <div v-if="detail.sesameCode == '4'">650-700</div>
                        <div v-if="detail.sesameCode == '5'">700以上</div>
                    </div>
                    

                </el-col>
            </el-row>
            
           
            <el-row>
                <el-col :span="4" v-if="detail.houseUrl  && detail.isHouse == '1'" >
                    <div>房屋照片</div>
                    <div class="value">
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="detail.houseUrl" 
                            :preview-src-list="getImgUrl(detail.houseUrl)"
                        >
                        </el-image>
                    </div>
                </el-col>
                <el-col :span="4" v-if="detail.fundUrl && detail.isFund == '1'">
                    <div>公积金截图</div>
                    <div class="value break-item" >
                        <!-- :preview-src-list="fundUrlList]" -->
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="detail.fundUrl" 
                            :preview-src-list="getImgUrl(detail.fundUrl)"
                            
                        >
                        </el-image>
                    </div>
                </el-col>
                <el-col :span="4" v-if="detail.clockSalaryUrl && detail.isClockSalary == '1'">
                    <div >打卡工资截图</div>
                    <div class="value break-item">
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="detail.clockSalaryUrl" 
                            :preview-src-list="getImgUrl(detail.clockSalaryUrl)"
                        >
                        </el-image>
                    </div>
                </el-col>
                <el-col :span="4" v-if="detail.licenseUrl &&  detail.isLicense == '1'">
                    <div >营业执照照片</div>
                    <div class="value break-item">
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="detail.licenseUrl" 
                            :preview-src-list="getImgUrl(detail.licenseUrl)"
                        >
                        </el-image>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" v-if="detail.socialUrl && detail.isSocial == '1'">
                    <div>社保截图</div>
                    <div class="value break-item">
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="detail.socialUrl" 
                            :preview-src-list="getImgUrl(detail.socialUrl)"
                        >
                        </el-image>
                    </div>
                </el-col>
                <el-col :span="4" v-if="detail.warrantyUrl && detail.isWarranty == '1'">
                    <div >保单截图</div>
                    <div class="value break-item" >
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="detail.warrantyUrl" 
                            :preview-src-list="getImgUrl(detail.warrantyUrl)"
                        >
                        </el-image>
                    </div>
                </el-col>
            </el-row>
            <el-tabs v-model="active" type="card">
                <el-tab-pane label="推广信息" name="normal">
                    <el-row>
                        <el-col :span="8">
                            推广计划/推广机构名称：{{ detail.planName }}/{{ detail.orgName }}
                        </el-col>
                        <el-col :span="8">
                            消费金额：{{  detail.unitAmount }}
                        </el-col>
                        <el-col :span="8">消费时间：{{ detail.matchTime }}</el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
            <el-tabs v-model="active" type="card">
                <el-tab-pane label="放款信息" name="normal">
                    <el-row>
                        <el-col :span="8">
                            结算类型：
                            <span v-if="detail.balanceType == 1">cpa结算</span>
                            <span v-if="detail.balanceType == 2">cps结算</span>
                        </el-col>
                        
                    </el-row>
                    <el-row v-if="detail.balanceType == 2">
                        <el-col :span="8" >
                            放款金额：{{  detail.fundAmount }}
                        </el-col>
                        <el-col :span="8">
                            放款状态：
                            <span class="color-red" v-if="detail.fundStatus == '0'">未放款</span>
                            <span class="color-green" v-if="detail.fundStatus == '1'">已放款</span>
                            <span class="color-gray" v-if="detail.fundStatus == '2'">已终止</span>
                        </el-col>
                        <el-col :span="8" >
                            放款时间：{{  detail.fundTime }}
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-drawer
            title="个人授权协议"
            :visible.sync="showAgreement"
            :direction="direction"
            :before-close="handleClose"
            :append-to-body="true"
            size="600px"
        >
            <agreement :data="detail"></agreement>
        </el-drawer>
    </div>
</template>
<script>
    import agreement from '../orderList/agreement.vue';
    export default{
        components:{
            agreement
        },
        props: {
            detail: {
                type: Object,
                default: {}
            }
        },
        data() {
            return {
                active: 'normal',
                showAgreement: false,
                direction:'rtl',
                
            }
        },
        methods: {
            // 计算已选资质
            getTotalNum() {
                let total  = 0
                if(this.detail.isCar == 1){
                    total++
                }
                if(this.detail.isHouse == 1){
                    total++
                }
                if(this.detail.isFund == 1) {
                    total++
                }
                if(this.detail.isLicense == 1){
                    total++
                }
                if(this.detail.isSocial == 1){
                    total++
                }
                if(this.detail.isClockSalary == 1){
                    total++
                }
                if(this.detail.isWarranty == 1){
                    total++
                }
                if(this.detail.isLocal == 1){
                    total++
                }
                if(this.detail.sesameCode > 0){
                    total++
                }
                return total
                
            },
            lookAgreement() {
                this.showAgreement = true
                // this.$router.push({path:'/user/orderAgreement',query:{name: this.detail.name,matchTime:this.detail.matchTime}})
                
            },
            handleClose() {
                this.showAgreement = false
            },
            getImgUrl(data) {
                return [data]
            },
            copy() {
                navigator.clipboard.writeText(this.detail.orderNo).then(() => {
                   this.$modal.msgSuccess('已复制到剪贴板');
                })
                .catch((err) => {
                    // 复制失败
                    console.error("复制失败");
                 });

            }
        }
    }
</script>
<style lang="scss" scoped>
    .detail-wrap{
        padding: 0 20px;
        .title{
            font-size: 18px;
            font-weight: 500;
            color: #303133;
            font-weight: bold;
            // border-left: 3px solid #1890ff;
            line-height: 16px;
            margin-top: 20px;
            .copy{
                margin-left: 10px;
                cursor: pointer;
            }
        }
        .detail-content{
            margin-top: 15px;
            .detail-item{
                display: flex;
                align-items: center;
                margin-bottom: 15px;
                >div{
                    display: flex;
                }
            }
            .item-title{
                font-size: 15px;
                color: #1890ff;
                margin-top: 30px;
                margin-bottom: 10px;
                font-weight: 500;
                .select-title{
                    margin-left: 10px;
                    color: #000;
                    font-weight: 400;
                    font-size: 14px;

                }
            }
            .item{
                display: flex;
                align-items: center;
                margin-right: 40px;
                &.break-item{
                    flex-direction: column;
                    align-items: flex-start;
                }
            }
            .el-row {
                margin-bottom: 10px;
            }
        }
    }
    .mar-l-10{
        margin-left: 10px;
    }
    .title-content{
        padding-top: 10px;
        height: 40px;   
    }
    .title-item{
        padding: 10px;
        margin: 0 10px 10px 0;
        background: rgba(51,133,255,0.08);
        border-radius: 4px;
        color: #3385FF;
    }
    .gray-title{
        color: #999;
        background: #F5F7FA;
        display: none;
    }
    .color-green{
        color: green;
    }
    .color-red{
        color: red;
    }
    .color-gray{
        color: gray;
    }
</style>